<template>
  <div class='container'>
       <el-button type="text" @click="dialogVisible = true">资费核实选择 </el-button>
            <el-dialog
        title="甲端本地资费核实"
        :visible.sync="dialogVisible"
        width="85%"
        lock-scroll
     >
     <div>
      
       <el-form :model="ruleForm" ref="ruleForm" label-width="130px">
            <fieldset class="contain-box">
                   <legend class="contain-title">节点选择</legend>
                   <div class="m-bd">
                         <div style="margin: 15px 0;"> 
                        <el-checkbox  class="all-check" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>请选择甲端节点
                    </div>
                    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                             <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                    </el-checkbox-group>
                    
                    <div style="margin: 15px 0;"> 
                        <el-checkbox  class="all-check" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>请选择已端节点
                        </div>
                    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                         <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                    </el-checkbox-group>
                   </div>     
            </fieldset>  
       </el-form>
        </div>
            <span slot="footer" class="dialog-footer">
                <div class="text-c">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </div>
                    
            </span>
</el-dialog>
     
  </div>
</template>

<script>
 const cityOptions = ['甲端本地网'];
  export default {
    // import引入的组件需要注入到对象中才能使用
    components: {},
    // 这里存放数据
    data () {
      return {
          ruleForm:{},
          checkAll: false,
        checkedCities: ['甲端本地网'],
        cities: cityOptions,
        isIndeterminate: true,
        dialogVisible:false,
      }
    },
    // 生命周期 - 创建完成（可以访问当前thischeckAll实例）
    created () {},
    mounted () {
      
    },
    // 方法集合
    methods: {
        handleCheckAllChange(val) {
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      }
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 如果页面有keep-alive缓存功能，这个函数会触发
    activated () {},
    // 生命周期 - 挂载完成（可以访问DOM元素）
    beforeCreate () {},
    // 生命周期 - 数据挂载之前 
    beforeMount () {},
    // 生命周期 - 数据更新之前 
    beforeUpdate() {},
    // 生命周期 - 数据更新之后 
    updated () {},
    // 生命周期 - 页面销毁之前 
    beforeDestroy() {},
    // 生命周期 - 页面销毁完成 
    destroyed () {},
  }
</script>

<style scoped>
  /* @import url(); 引入公共css类 */
.container{
    padding: 0.1rem 0.2rem;

}
.contain-box{
    padding:0 0.2rem;
     border: 1px solid #f56f3c;
   
}
.contain-title{
  margin-left:0.4rem;
  padding:0 0.1rem;
}
.all-check{
    margin-right:0.2rem
}
.contain-box{
    margin:0 0 0.2rem;
}
.m-bd{
    margin-bottom:0.2rem;
}
.text-c{
    text-align: center
}
</style>